<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        /* 添加自定义样式 */
        .custom-alert .el-message-box {
            max-width: 100%; /* 或者你希望的最大宽度，如600px */
            max-height: 100%;
            overflow: auto; /* 允许内容在弹窗内滚动 */
        }

        .custom-alert .el-message-box__content {
            padding: 10px; /* 根据需要调整内边距 */
        }
        .custom-descriptions .el-descriptions {
            text-align: left; /* 确保内容左对齐 */
        }
        .el-select .el-input {
            width: 130px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        .el-pagination {
            white-space: nowrap;
            padding: 2px 5px;
            color: #303133;
            font-weight: 700;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="title">
        <el-row>
            <el-col :span="8">
                <div style="margin-top: 15px">
                    <el-button @click="toggleSelection(tableData)">全选</el-button>
                    <el-button @click="toggleSelection()">取消</el-button>
                    <el-button type="danger" @click="deletedd(multipleSelection)">删除</el-button>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="block" >
                    <div style="margin-top: 15px">
                        <el-date-picker
                                v-model="finddata"
                                type="monthrange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始月份"
                                end-placeholder="结束月份"
                                :picker-options="pickerOptions"
                                @change="handleDateChange"
                                @clear="getAllUsers">
                        </el-date-picker>
                    </div>
                </div>
            </el-col>
            <el-col :span="8" >
                <div style="margin-top: 15px;">
                    <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                            <el-option label="全部" value="1"></el-option>
                            <el-option label="名称" value="bname"></el-option>
                            <el-option label="状态" value="status"></el-option>
                            <el-option label="等级" value="level"></el-option>
                            <el-option label="分类" value="tname"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" style="background-color: rgb(145,216,180)" @click="find()"></el-button>
                    </el-input>
                </div>
            </el-col>
        </el-row>

    </div>
    <div class="format">
        <el-table
                ref="multipleTable"
                :data="tableData"
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%"
                @current-change="handleCurrentChange"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="bid"
                    label="编号"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="bname"
                    label="名称"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column prop="bimage" label="坛头像" align="center" width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.bimage" style="width: 50px; height: 50px" />
                </template>
            </el-table-column>

            <el-table-column
                    prop="bdata"
                    label="日期"
                    align="center"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="ex"
                    label="经验"
                    align="center"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="tname"
                    label="区类"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="100" >
                <template slot-scope="scope">
                    <span>{{ scope.row.status === 0 ? '正常' : '封禁' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作&封禁" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">详情</el-button>

                    <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="0"
                            :inactive-value="1"

                            @change="handleStatusChange(scope.row)"
                    ></el-switch>

                </template>
            </el-table-column>
        </el-table>
        <!--        分页   -->
        <el-pagination
                :background="true"
                layout="prev, pager, next"
                :total="totalData.length"
                :page-size="pageSize"
                @current-change="Page"
        >
        </el-pagination>
    </div>

</div>

<script>
    new Vue({
        el:'#app',
        mounted(){
            this.getAllUsers();
        },

        data:{
            tableData: [],
            totalData: [], //分好类的数据直接扔进去  后面分页使用
            multipleSelection: [],
            input: '',
            select: '1',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            finddata: '',
            // 初始页码
            currentPage: 1,
            // 每页显示的条目数
            pageSize: 8,
            n: [],

        },
        methods:{
            getAllUsers(){
                axios.get("bars/getAllBars").then(x=>{
                    this.tableData = x.data;
                    this.totalData = this.tableData
                    if (this.tableData.length <=8){
                        this.pageSize = this.tableData.length;
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //全选 取消
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                        console.log(row+row.bname)
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            //选择  和  行  将值  赋值到这两个数组中 一个是数据另一个是行的颜色更改
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },
            // 处理页码变化的事件
            Page(newPage) {
                this.currentPage = newPage;
                // 更新 tableData 以反映当前页的数据
                this.tableData = this.currentTableData;
            },

            //编辑部分
            handleEdit(index, row) {
                console.log(index, row);

                this.getUser(row.uid,row.otherid,row)
            },
            //获取删除的 数据
            deletedd(rows){
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                        console.log(row+row.bname)
                    });
                }
            },
            //处理账号封禁的操作 //后面按钮的修改状态
            handleStatusChange(row) {
                // 处理状态切换的逻辑，例如发送请求更新状态
                console.log('状态切换:', row.status+""+row.bid);
                axios.get("bars/StatusChange",{params: {status:row.status,bid:row.bid}}).then(x=>{
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success'
                    });
                }).catch(error=>{
                    this.$notify({
                        title: '失败',
                        message: '修改失败，请稍后重试',
                        type: 'error'
                    });
                    console.log(error);
                })

            },
            //按钮查询
            find() {
                // 这里可以添加更多的查询逻辑
                console.log("input:", this.input,
                    "select:", this.select,);
                axios.get("bars/getFindBars",{params:{select:this.select,input:this.input}}).then(x=>{
                    this.tableData = x.data;
                    this.totalData = this.tableData;
                    if (this.tableData.length <=8){
                        this.pageSize = this.tableData.length;
                    }
                })
            },
            //日期格式转换
            formatDate(dateString) {
                const date = new Date(dateString); // 这里dateString应该是ISO格式的字符串
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
            //筛选日期
            handleDateChange(value) {
                this.find()
                // value 是选择的日期范围数组 [开始日期, 结束日期]
                if (value) {

                    // 执行筛选逻辑，例如调用 API 获取数据
                    // 这里的 filterData 是一个示例方法，你需要根据实际情况实现筛选逻辑
                    value[0] = this.formatDate(value[0])
                    value[1] = this.formatDate(value[1])
                    console.log(`筛选数据，开始日期：${value[0]}, 结束日期：${value[1]}`);
                    const f1 = value[0].replace("-", "").substring(0, 6)+"01";
                    const f2 = value[1].replace("-", "").substring(0, 6)+"01";
                    console.log(f1+f2)

                    // 筛选 this.tableData 中的项
                    this.tableData = this.tableData.filter(item => {
                        // 格式化 item.rdata 为 'YYYYMMDD' 格式
                        console.log(item + item.rdata)
                        let itemDateFormatted = item.rdata.replaceAll("-", "").substring(0, 8);
                        console.log(itemDateFormatted)
                        // 检查格式化后的日期是否在用户选择的日期范围内
                        return itemDateFormatted >= f1 && itemDateFormatted <= f2;
                    });
                }
            },
            //对坛主的查询
            getUser(m,n,row){
                if (n!=null){
                    n = m+","+n;
                }else {
                    n=""+m
                }
                // let arr = n.split(",")
                // console.log(arr+"arr")
                // let arrNumber = arr.map(Number);
                console.log("numarr"+n)
                axios.get("bars/getUser",{params:{uid : n}}).then(x=>{

                    let userData = x.data;
                     // 获取第一个名字
                    this.m = userData[0].name;
                    let nb = userData.slice(1).map(item => item.name); // 除了第一个名字的其他名字数组
                    this.n =nb;
                    if (nb.length === 0) {
                        this.n = '暂无';
                    }

                    this.$alert('<strong><div>\n' +
                        '                论坛主: ' + this.m + '<br>\n' +
                        '                小论主: ' + this.n + '<br>\n' +
                        '                等级: ' + row.level + '<br>\n' +
                        '                等级名称: ' + row.levelname + '<br>\n' +
                        '</div></strong>', '详细信息', {
                        customClass: 'custom-alert', // 添加自定义类
                        dangerouslyUseHTMLString: true,
                        showClose: true, // 如果需要关闭按钮
                        center: true, // 内容居中显示
                        closeOnClickModal: false, // 点击模态框外部是否关闭弹窗
                    });
                })

            },
        },
        computed:{
            currentTableData() {
                const startIndex = (this.currentPage - 1) * this.pageSize;
                const endIndex = startIndex + this.pageSize;
                return this.totalData.slice(startIndex, endIndex);
            }
        },
        watch: {
            // 监听 totalData 的变化，更新 tableData
            totalData: {
                immediate: true,
                handler(newVal) {
                    this.tableData = this.currentTableData;
                }
            }
        },
    })
</script>
</body>
</html>